<template>
	<view>
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navbar-header">
				<view class="left" @click="$mRouter.back()">
					<u-icon name="arrow-left" size="36"></u-icon>
				</view>
				账户
			</view>
			<view class="u-flex u-row-between u-m-t-40">
				<view class="u-flex-col">
					<text style="font-size: 28rpx;">账户余额（元）</text>
					<text style="font-size: 58rpx;">{{ balance }}</text>
				</view>
				<view class="mingxi-box" @click="$mRouter.push({ route: '/pages/purchase/zhanghu/mingxi' })">
					<text class="u-font-26" style="margin-left: 26rpx;">查看明细 </text>
					<u-icon name="arrow-right" size="26" style="margin-left: 8rpx;"></u-icon>
				</view>
			</view>
		</view>
		<view style="height: 308rpx"></view>
		<!--  -->
		<view class="content">
			<view style="height: 90rpx;line-height: 90rpx;">
				<text class="u-font-28">优惠劵</text>
			</view>
			<!-- <view class="item">
				<view class="first-row u-flex u-row-left">
					<view style="width: 200rpx;"><text :style="{fontSize: '46rpx', color: themeColor}">10</text><text :style="{fontSize: '32rpx', color: themeColor}">元</text></view>
					<text :style="{fontSize: '32rpx', color: themeColor}">全场可用</text>
				</view>
				<view class="second-row u-flex u-row-left">
					<view style="width: 200rpx;"><text style="fontSize: 24rpx;color:#666666;">满200可用</text></view>
					<text style="fontSize: 26rpx;color:#666666;">CUBITA、KHA可用</text>
				</view>
				<view style="text-align: right;">
					<text class="u-font-22" style="color: #999999;" >有效期至2021-08-31</text>
				</view>
			</view> -->
			<view class="text-item" v-for="(item, index) in list" :key="index">
				<view style="position: absolute; z-index: 99;padding: 45rpx 20rpx 20rpx 40rpx;">
					<view class="u-flex u-row-left">
						<view style="width: 180rpx;"><text :style="{fontSize: '46rpx', color: badgeColor}">{{ item.price }}</text><text :style="{fontSize: '32rpx', color: badgeColor}">元</text></view>
						<text class="u-font-32">{{ item.where }}</text>
					</view>
					<view class="u-flex u-row-left">
						<view style="width: 180rpx;"><text class="u-font-24 info-color">{{ item.tiaojian }}</text></view>
						<text class="u-font-26 info-color">{{ item.pinpai }}</text>
					</view>
					
				</view>
				<view style="position: absolute; right: 30rpx;z-index: 99; bottom: 30rpx;">
					<text class="u-font-22" style="color: #999999;" >{{ item.youxiaoqi }}</text>
				</view>
				<view >
					<image src="/static/youhuiquan.png" style="height: 206rpx;width: 100%;" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let arr = []
			for(let i = 0; i<10; i++) {
				arr.push({
					price: 10,
					where: '全场可用',
					pinpai: 'CUBITA、KHA可用',
					tiaojian: '满200可用',
					youxiaoqi: '有效期至2021-08-31'
				})
			}
			return {
				list: arr,
				balance: 0
			}
		},
		onLoad(options) {
			if (options) {
				this.balance = options.balance
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		width: 100%;
		height: 308rpx;
		border-radius: 0 0 15rpx 15rpx;
		background-color: $theme-color;
		/* padding: 0 35rpx; */
		padding-left: 35rpx;
		/* #ifdef H5 */
		padding-top: 38.5rpx;
		/* #endif */
		font-size: 36rpx;
		font-weight: 500;
		z-index: 999;
		.navbar-header {
			text-align: center;
			.left {
				float: left;
			}
		}
	}
	.mingxi-box {
		display: flex;
		align-items: center;
		width: 200rpx;
		height: 70rpx;
		border: 1px solid $uni-text-color;
		border-right: none;
		border-radius: 35rpx 0 0 35rpx;
		text-align: center;
	}
	.content {
		// margin-top: 308rpx;
		// position: absolute;
		padding: 0 35rpx;
	}
	.item {
		position: relative;
		background-color: #fff;
		padding: 45rpx 20rpx 20rpx 30rpx;
	}
	.text-item {
		position: relative;
		// padding: 45rpx 20rpx 20rpx 30rpx;
	}
</style>
